<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <Case></Case>
    </SearchPanel>

    <div class="table-container">
      <!-- <div class="table-tools-panel table-flex-row">
        <el-button
          class="flush-btn"
          size="mini"
          icon="el-icon-refresh"
          @click="() => handleRefresh()"
          >刷新</el-button
        >
      </div> -->
      <div class="table-beyond-state">
        <div>
          <img src="../../assets/images/images1/icon3.png" alt="">
          <span>未超期</span>
        </div>
        <div>
          <img src="../../assets/images/images1/icon2.png" alt="">
          <span>即将超期</span>
        </div>
        <div>
          <img src="../../assets/images/images1/icon1.png" alt="">
          <span>已超期</span>
        </div>
      </div>
      <div class="table-list-panel">
        <el-table
          ref="table"
          v-loading="tableLoading"
          size="small"
          border
          :data="tableData"
          :height="isShow ? 'calc(100vh - 530px)' : 'calc(100vh - 350px)'"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="45" fixed="left" />
          <el-table-column
            prop="index"
            label="序号"
            show-overflow-tooltip
            width="50"
          />
          <el-table-column prop="status"
            label="状态"
            show-overflow-tooltip
            width="100">
            <template slot-scope="scope">
              <img v-if="scope.row.status=='已超期'" src="../../assets/images/images1/icon1.png" alt="" style="width: 12px;height: 12px;vertical-align: middle;">
              <img v-if="scope.row.status=='即将超期'" src="../../assets/images/images1/icon2.png" alt="" style="width: 12px;height: 12px;vertical-align: middle;">
              <img v-if="scope.row.status=='未超期'" src="../../assets/images/images1/icon3.png" alt="" style="width: 12px;height: 12px;vertical-align: middle;">
              {{scope.row.status}}
            </template>
          </el-table-column>
          <el-table-column
            prop="dealLimit"
            label="到期时间"
            show-overflow-tooltip
            sortable  
            width="130"
          >
            <template slot-scope="scope">
              <div>
                {{ parseTime(scope.row.dealLimit) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="事件编号"
            show-overflow-tooltip
            width="100"
          />
           <el-table-column
            prop="workNum"
            label="工单编号"
            show-overflow-tooltip
            width="110"
          >
          <template slot-scope="scope">
              <span>{{(scope.row.workNum)?(scope.row.workNum):'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sourceName"
            label="上报来源" 
            show-overflow-tooltip
            width="100"
          />
          <el-table-column label="工单类型" show-overflow-tooltip width="100">
            <template slot-scope="scope">
              <span>{{(scope.row.formType==0)?'电话工单':(scope.row.formType==1)?'信件工单':(scope.row.formType==2)?'短信工单':(scope.row.formType==3)?'信件和网络理政':'其他'}}</span>
            </template>
          </el-table-column>
           <el-table-column label="工单标题" show-overflow-tooltip  width="150">
            <template slot-scope="scope">
              <span>{{(scope.row.title)?(scope.row.title):'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="事件类型" show-overflow-tooltip  width="150">
            <template slot-scope="scope">
              <span>{{(scope.row.categoryCompleteName)?(scope.row.categoryCompleteName):'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="事件发生地" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{(scope.row.address)?(scope.row.address):'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="来电号码" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{(scope.row.phone)?(scope.row.phone):'--'}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="	当前处理部门"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{(scope.row.nodeNowDeptName)?(scope.row.nodeNowDeptName):'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前处理人" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{(scope.row.nodeNowUserName)?(scope.row.nodeNowUserName):'--'}}</span>
            </template>
          </el-table-column> -->
          
          <!-- <el-table-column prop="handleStatus" label="处置状态" show-overflow-tooltip width="100">
          </el-table-column> -->
           <el-table-column
            label="处理节点"
            show-overflow-tooltip
          >
          <template slot-scope="scope">
              <span>{{(scope.row.nodeNowName)?(scope.row.nodeNowName):'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row)"
                >详情</el-button
              >
              <!-- <el-button
                class="table-inner-btn"
                :disabled="scope.row.currentStatus >= 8"
                type="text"
                size="mini"
                @click.native="handleUpdate(scope.row)"
                >流程</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-panel">
          <Pagination
            :total="query.total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="getQueryAllListData"
          />
        </div>
      </div>
    </div>

    <!-- 弹窗框 -->
    <TaskHistoryDialog
      custom-class="custom-dialog"
      @closeDialog="dispatchDialogVisible = false"
      :dialogVisible="dispatchDialogVisible"
      :case-code="caseCode"
    />

    <!-- 督办弹窗框 -->
    <SuperviseListDialog
      custom-class="custom-dialog"
      @closeDialog="SuperviseListDialog = false"
      :dialogVisible="SuperviseListDialog"
      :case-code="caseCode"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import SuperviseListDialog from "@/views/casedeal/components/superviseListDialog";
import Case from "@/components/case";
import { parseTime } from "@/utils/index";
import TaskHistoryDialog from "@/views/casedeal/components/taskHistoryDialog";
import { detailsUrl } from "@/utils/changeUrl";
import {
  categoryType,
  industryArea,
  myEndDispatched,
} from "@/api/case.js";
import { getList } from "@/api/law/apelist";
export default {
  name: "CaseDealList",
  components: {
    Pagination,
    SearchPanel,
    TaskHistoryDialog,
    Case,
    SuperviseListDialog,
  },
  data() {
    return {
      dispatchDialogVisible: false,
      SuperviseListDialog: false,
      obj: null,
      dialogType: "add",
      tableLoading: false,
      SourceTypeArr: [], // 来源
      IndustryAreaArr: [], //行业领域所有
      TitleOfPowerArr: [], //权力名称下拉框
      ChecklistArr: [], //事项清单下拉框

      query: {
       total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
        overFlag: null,
        status: 0,
        id: "",
        beginTime:startDate(),
        endTime: getNowFormatDate(),  
        handleStatus:null,  
        areaCode:null,
      },
      tableData: [],
      caseCode: "",
      timer: "", //定时器
      isShow: true,
    };
  },
  created() {
    this.initData();

    // 调用行业领域的接口
    this.getIndustryArea();

    // 调用获取来源类型的接口
    this.getSourceMessage();

    this.$bus.$on("formDatas", (data) => {
      // let address = location.href.substr(
      //   location.href.indexOf("#") + 1,
      //   location.href.length
      // );
      let address = '/finish/index';
      let areaCode =null;
      if(data.addressCity){
         areaCode = data.addressCity;
      }
      if(data.addressStreet){
         areaCode = data.addressStreet;
      }
      if(data.addressDetailedUser){
         areaCode = data.addressDetailedUser;
      }
      if (data.address == address) {
        this.tableLoading = true;
        this.query.areaCode = areaCode;
        this.query.categoryDcaCode = data.industry;
        this.query.handleStatus = data.handleStatus;
        this.query.categorySupCode = data.majorCategories;
        this.query.categorySubCode = data.subclass;
        this.query.code = data.caseCode;
         this.query.beginTime = data.startTime; 
        this.query.endTime = data.endTime;
        this.query.sourceCode = data.sourceCode;
        this.query.categoryCode = data.categoryCode;
        this.query.label = data.label;
        this.query.sourceCode = data.sourceCode;
        const query = JSON.parse(JSON.stringify(this.query));
        myEndDispatched(this.query)
          .then((result) => {
            let { rows, code, total } = result;
            let obj = {};
            if (code == 200) {
              this.tableData = rows;
              this.$bus.emit("closeDisabled", false);
              // 计算超时
              this.tableData.forEach((item) => {
                if (item.overFlag == 0) {
                  item.overFlag = "未超期";
                } else if (item.overFlag == 1) {
                  item.overFlag = "已超期";
                } else {
                  let time = Date.parse(new Date()) / 1000;
                  if (time > item.planCompletionTime) {
                    item.overFlag = "已超期";
                  } else if (time * 0.8 > item.planCompletionTime) {
                    item.overFlag = "即将超期";
                  } else {
                    item.overFlag = "未超期";
                  }
                }
              });
              this.query.total = total;
            }
            this.tableLoading = false;
          })
          .catch(() => {
            this.tableLoading = false;
          });
      }
    });
  },
  methods: {
    parseTime,
    selectionChange(selection) {},
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },

    // 督办列表
    superviseList(val) {
      this.SuperviseListDialog = true;
      this.$bus.emit("getsuperviseList", val);
    },

    // 查询所有已办
    getQueryAllListData() {
      this.tableLoading = true;
      myEndDispatched(this.query)
        .then((result) => {
          let { rows, code, total } = result;
          let obj = {};
          if (code == 200) {
            this.tableData = rows;
            console.log(result)
            // 计算超时
            this.tableData.forEach((item) => {
              if (item.overFlag == 0) {
                item.overFlag = "未超期";
              } else if (item.overFlag == 1) {
                item.overFlag = "已超期";
              } else {
                let time = Date.parse(new Date()) / 1000;
                if (time > item.planCompletionTime) {
                  item.overFlag = "已超期";
                } else if (time * 0.8 > item.planCompletionTime) {
                  item.overFlag = "即将超期";
                } else {
                  item.overFlag = "未超期";
                }
              }
            });
            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 获取行业领域
    getIndustryArea() {
      industryArea({ parentId: 0 })
        .then((result) => {
          let { rows } = result;
          this.IndustryAreaArr = rows;
        })
        .catch({});
    },

    // 获取来源类型
    getSourceMessage() {
      categoryType({
        sysGroup: "caseSource",
      })
        .then((result) => {
          let { rows } = result;
          this.SourceTypeArr = rows;
        })
        .catch({});
    },

    // 行业领域的change事件
    industryChange(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.TitleOfPowerArr = res.rows;
        })
        .catch(() => {});
    },

    // 权力名称的change事件
    powerChange(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.ChecklistArr = res.rows;
        })
        .catch(() => {});
    },

    // 刷新
    handleRefresh() {
      this.clearQuery();
      this.getQueryAllListData();
    },
    // 流程
    handleUpdate(row) {
      this.caseCode = row.code;
      this.dispatchDialogVisible = true;
    },
    initData() {
      this.getQueryAllListData();
    },

    handleDetail(row) {
      // sessionStorage.setItem("flushBackUrl", "/caseDetail/caseDetail");
      // this.$router.push({
      //   name: "CaseDetail",
      //   params: {
      //     caseCode: row.code,
      //     dialogType: "detail",
      //     buttonDisable: false,
      //   },
      // });

      let href_url = location.href;
      let url = href_url.match(/access_token=(\S*)&expireTime/)[1];
      let addressUrl = `${detailsUrl}/km/review/km_review_main/kmReviewMain.do?access_token=${url}&method=view&fdId=${row.id}`;
      window.open(addressUrl);
    },

    // 顶部查询按钮
    handleQuery() {
      this.getQueryAllListData();
    },
    clearQuery() {
      this.query = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
      };
    },
  },
  beforeDestroy() {
    this.$bus.off("formDatas");
  },
   mounted() {
    // 设置定时器，每10分钟刷新当前列表   10.25改
    this.timer = setInterval(() => {
      this.getQueryAllListData(this.query);
     }, 600000);
  },
  beforeDestroy() {
    // 离开页面，清除定时器
    clearInterval(this.timer);
  }
};
function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
         currentdate = (new Date(currentdate+' '+'23:59:59')).getTime();
        return currentdate;
    }
    function startDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
         var month = date.getMonth()+1;
        if(month-1==0){
          month = 12;
          year = year-1
        }else{
          month -= 1;
        }
        var strDate = 1;
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        currentdate = (new Date(currentdate+' '+'00:00:00')).getTime();
        return currentdate;
    }
</script>

<style lang="scss" scoped>
.overFlagBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.supervise {
  cursor: pointer;
}
.overFlagBox img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
/deep/ .pagination-container {
  padding: 0 16px;
  margin-top: 10px;
}
</style>
